<template>
  <div>
    <v-app-bar app elevation="0">
      <v-row>
        <v-col cols="3">
          <v-btn text color="#4caf50" @click="$router.push(fromPath)">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-col>
        <v-spacer/>
        <v-col cols="3">
          <v-btn text color="#4caf50">帮助</v-btn>
        </v-col>
      </v-row>
    </v-app-bar>
    <v-main>
      <br/>
      <br/>
      <br/>
      <br/>
      <v-card elevation="0">
        <v-card-title>欢迎登录XX外卖平台</v-card-title>
        <v-card-text>
          <br/>
          <br/>
          <v-form ref="loginForm">
            <v-row>
              <v-col cols="12">
                <v-text-field outlined dense label="请输入手机号"
                              v-model="loginForm.phone"
                              counter="11"
                              :rules="[rules.required,rules.phone]"/>
              </v-col>
              <v-col cols="12">
                <v-text-field type="password" outlined dense label="请输入密码"
                              v-model="loginForm.password"
                              :rules="[rules.required,rules.passwordLength]"/>
              </v-col>
            </v-row>
          </v-form>
          <div>
            <v-checkbox hide-details v-model="loginForm.flag">
              <template v-slot:label>
                <div style="width: auto">
                  我已阅读并同意相关协议。
                </div>
              </template>
            </v-checkbox>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-row>
            <v-col cols="12">
              <v-btn block color="#4caf50" :disabled="loginFlag" @click="handleLogin">
                登录
              </v-btn>
            </v-col>
            <v-col cols="3">
              <v-btn text color="#4caf50" @click="dialog=true">去注册</v-btn>
            </v-col>
            <v-spacer/>
            <v-col cols="4">
              <v-btn text color="#4caf50">用户协议</v-btn>
            </v-col>
          </v-row>
        </v-card-actions>
      </v-card>
    </v-main>
    <v-footer app>
      <v-row>
        <v-col cols="3"></v-col>
        <v-col cols="2"><v-btn fab small elevation="0"><v-icon>mdi-qqchat</v-icon></v-btn></v-col>
        <v-col cols="2"><v-btn fab small elevation="0"><v-icon>mdi-credit-card-marker</v-icon></v-btn> </v-col>
        <v-col cols="2"><v-btn fab small elevation="0"><v-icon>mdi-wechat</v-icon></v-btn> </v-col>
        <v-col cols="3"></v-col>
      </v-row>
    </v-footer>

    <v-dialog v-if="dialog"
              v-model="dialog"
              fullscreen
              hide-overlay
              transition="dialog-bottom-transition">
      <v-card>
        <v-card-title>注册页面</v-card-title>
        <v-card-text>
          <br/>
          <v-form ref="registerForm">
            <v-row>
              <v-col cols="12">
                <v-text-field label="手机号" dense outlined type="number"
                              v-model="registerForm.phone"
                              :rules="[rules.required,rules.phone]"
                              counter="11"/>
              </v-col>
              <v-col cols="12">
                <v-text-field label="姓名" dense outlined
                              v-model="registerForm.name"
                              :rules="[rules.required,rules.name]"
                              counter="10"/>
              </v-col>
              <v-col cols="12">
                <v-text-field type="password" label="密码"
                              v-model="registerForm.password"
                              :rules="[rules.required,rules.passwordLength]"
                              dense outlined/>
              </v-col>
              <v-col cols="12">
                <v-text-field type="password" label="确认密码"
                              v-model="registerForm.checkPassword"
                              :rules="[rules.required,rules.passwordLength]"
                              dense outlined/>
              </v-col>
              <v-col cols="6">
                <v-text-field dense outlined label="输入验证码" v-model="registerForm.checkCode"/>
              </v-col>
              <v-col cols="6">
                <v-img @click="getCaptcha" alt="图片验证码" :src="captchaImg"/>
              </v-col>
              <v-col cols="12">
                <v-btn color="#4caf50" block @click="handleRegister">点击注册</v-btn>
              </v-col>
              <v-col cols="4">
                <v-btn text color="#4caf50" @click="dialog=false">去登录</v-btn>
              </v-col>
            </v-row>
          </v-form>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import {selectCaptcha, register, login} from "@/http/api/login";
import JsCookie from 'js-cookie'
export default {
  name: "Index",
  data:()=>({
    dialog:false,
    captchaImg:"",
    rules: {
      required: value => !!value || '不能为空.',
      phone: value => (!!value &&value.length === 11) || '手机号长度有误!',
      name: value => (!!value && value.length>=1 && value.length <=10) || '姓名不能超过10位!',
      passwordLength: value=> (!!value && value.length >=8) || '密码长度最少八位'
    },
    registerForm:{
      phone:null,
      name:null,
      password:null,
      checkPassword:null,
      checkCode:null,
    },
    loginForm:{
      phone:null,
      password:null,
      flag:false
    }
  }),
  computed:{
    loginFlag(){
      return  !this.loginForm.flag
    },
    fromPath(){
      return this.$route.query.fromPath
    }
  },
  created() {
    this.getCaptcha()
  },
  methods:{
    getCaptcha(){
      selectCaptcha().then(res=>{
        let base64JpgPre = "data:image/jpg;base64,";
        this.captchaImg = base64JpgPre+res.data
      })
    },
    handleRegister(){
      let validate = this.$refs.registerForm.validate()
      if (validate){
        if (this.registerForm.password!=this.registerForm.checkPassword){
          this.$breadstick.notify("❌两次输入的密码不一样!!");
          return;
        }
        register(this.registerForm).then(res=>{
          this.$breadstick.notify("✔注册成功!")
        })
      }
    },
    handleLogin(){
      let validate = this.$refs.loginForm.validate()
      if (!validate){
        return;
      }
      login(this.loginForm).then(res=>{
        this.$breadstick.notify("✔登录成功!");
        JsCookie.set("token",res.data);
        if (this.fromPath){
          this.$router.push(this.fromPath);
        }else {
          this.$router.push("/");
        }
      })
    }
  }
}
</script>

<style scoped>
  *{
    background-color: #f7f7ff;
  }
</style>